<script setup>
import { ref, defineEmits } from 'vue'
import { queryUserListApi, updateUserApi } from '@/apis/user'
const emit = defineEmits(['title'])
emit('title', '会员管理')
const params = ref({
  pageNo: 1,
  pageSize: 10,
  username: '',
  gender: null
})
const total = ref(0)
const tableData = ref([
  {
    id: 1,
    date: '2016-05-03',
    name: 'Tom',
    address:
      'No. 189, Grove St, Los Angelesshifsdhfksdjfksdjkfjsdkafjkj收到货覅哦大数据开发手打开发好卡独守空房结算单看见啊肯定就是饭卡开服活动刷卡发哈扩大升级肯定就是卡号发快递啥课就看见',
    url: 'https://s.weituibao.com/1582958061265/mlogo.png',
    sex: 1,
    tabs: ['紫', '灰']
  },
  {
    id: 2,
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    url: 'https://s.weituibao.com/1582958061265/mlogo.png',
    sex: 2,
    tabs: ['白', '蓝']
  },
  {
    id: 3,
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    url: 'https://s.weituibao.com/1582958061265/mlogo.png',
    sex: 2,
    tabs: ['黑', '红']
  },
  {
    id: 4,
    date: '2016-05-01 00:00:00',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    url: null,
    sex: 1,
    tabs: ['黑', '红']
  }
])
const getUserList = async () => {
  const res = await queryUserListApi(params.value)
  tableData.value = res.data.data.list
  total.value = res.data.data.total
  console.log(total.value)
}
getUserList()
const columns = [
  {
    prop: '',
    type: 'selection'
  },
  {
    prop: '',
    type: 'index',
    label: '序号',
    width: '100'
  },
  {
    prop: 'username',
    type: 'text',
    label: '账号'
  },
  {
    prop: 'locked',
    type: 'enum',
    label: '身份状态',

    enum: [
      {
        label: '正常',
        value: 0,
        color: 'green'
      },
      {
        label: '锁定',
        value: 1,
        color: 'red'
      }
    ]
  },
  {
    prop: 'isDeleted',
    type: 'enum',
    label: '是否注销',
    enum: [
      {
        label: '正常',
        value: 0,
        color: 'green'
      },
      {
        label: '注销',
        value: 1,
        color: 'red'
      }
    ]
  },
  {
    prop: 'createTime',
    label: '创建时间',

    type: 'date'
  }
]
const lockedIds = ref([])
const handleSelectionChange = async (e) => {
  lockedIds.value = e
}

const onLocked = async (locked) => {
  if (lockedIds.value.length === 0) {
    ElMessage({
      message: '请选择要操作的数据',
      type: 'warning'
    })
    return
  }
  console.log(lockedIds.value + ' :  ' + locked)

  await updateUserApi(lockedIds.value, locked)
  if (locked === 1) {
    ElMessage({
      message: '禁用成功',
      type: 'success'
    })
  } else {
    ElMessage({
      message: '启用成功',
      type: 'success'
    })
  }
  getUserList()
}

const currentChange = (e) => {
  params.value.pageNo = e
  getUserList()
}

const sizeChange = (e) => {
  params.value.pageNo = 1
  params.value.pageSize = e
  getUserList()
}
</script>

<template>
  <div>
    <TabComponent
      @selectionChange="handleSelectionChange"
      :columns="columns"
      :tableData="tableData"
      :height="450"
    >
      <template #header>
        <el-button type="primary" @click="onLocked(0)">解除禁用</el-button>
        <el-button type="danger" @click="onLocked(1)">禁用账户</el-button>
      </template>
      <template #pagination>
        <el-pagination
          background
          layout="sizes,prev, pager, next,total"
          :total="total"
          :page-sizes="[10, 15, 20]"
          v-model:page-size="params.pageSize"
          v-model:current-page="params.pageNo"
          @current-change="currentChange"
          @size-change="sizeChange"
        />
      </template>
    </TabComponent>
  </div>
</template>

<style lang="sass" scoped></style>
